// http://igeekbar.com/igeekbar/post/109.htm
/*Vue 2.0 注意 
Array.prototype.$set/$remove deprecated (use Vue.set or Array.prototype.splice instead)
ready（已丢弃，使用mounted)
*/

var vm = new Vue ({
	el:'#events',
	data: {
		 event: { name: '', description: '', date: '' },
		 events:[]
	},
	// 在应用加载的时候会执行ready属性中的函数
 	 ready: function() {  //ready（已丢弃，使用mounted
 	 },
 	 created:function(){
 	 // 在应用加载的时候我们需要初始化数据
       this.fetchEvents();
 	 },
  	// 我们在应用中使用到的方法会在methods属性中定义
 	 methods: {
 	 	 // 我们定义一个方法来获取数据
 	 	 fetchEvents:function(){
 	 	 	var events =[
                {
                    id: 1,
                    name: '开会',
                    description: '上午9点在21层大会议室',
                    date: '2015-09-10'
                },
                {
                    id: 2,
                    name: '购物',
                    description: '买个充电宝',
                    date: '2015-10-02'
                },
                {
                    id: 3,
                    name: '学习',
                    description: '学习Vue官网上的教程',
                    date: '2016-03-11'
                } 
 	 	 	];
            
 	 	 	// $set 是Vue提供的一个向数组插入数据的方法，在执行它的时候还会刷新视图
 	 	 	//this.$set('events', events);
 	 	 	Vue.set(this, 'events', events)  //2.0版本有所区别

 	 	 },

 	 	 //向事项数组插入数据
 	 	 addEvent:function(event){
 	 	 	if (this.event.name) {
 	 	 		this.events.push(this.event);
 	 	 		console.log(this.events)
 	 	 		this.event = {
 	 	 			 name: '', description: '', date: ''
 	 	 		};
 	 	 		console.log(event.target)
 	 	 	}
 	 	 },
 	 	 deleteEvent:function(index){
              if (confirm("Are you sure you want to delete this event?")) {
            
              	console.log(index)
              	// $remove is a Vue convenience method similar to splice
                //this.events.$remove(index);  //　vue 1.0 版本
                this.events.splice(index, 1)   //vue 2.0版本 
              }
 	 	 }
 	 }
});


